<template>
  <div>
    <h1>music</h1>
    <ul>
      <li v-for="music in list" :key="music">{{music}} </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Music",
  props:["id"],
  mounted(){
    // console.log(this.$route); 在组件实例上有个$route 他为一个对象 其中存放着该路由的相关信息
    // this.$route上有个params属性 值为一个对象 存放你传递的params参数
    console.log(this.$route);
  },
  computed: {
    list() {  
      // params传参
         switch (this.id) {
        case '1':
          return ["华语歌曲1", "华语歌曲2", "华语歌曲3"];
        case '2':
          return ["rap歌曲1", "rap歌曲2", "rap歌曲3"];
        case '3':
          return ["英语歌曲1", "英语歌曲2", "英语歌曲3"];
          default : return []
      }  

      // query传参
      //    switch (this.$route.query.id) {
      //   case '1':
      //     return ["华语歌曲1", "华语歌曲2", "华语歌曲3"];
      //   case '2':
      //     return ["rap歌曲1", "rap歌曲2", "rap歌曲3"];
      //   case '3':
      //     return ["英语歌曲1", "英语歌曲2", "英语歌曲3"];
      //     default : return []
      // }    
    },
  },
};
</script>

<style>
</style>